import Taro, {Component} from "@tarojs/taro";
import {View, Swiper, SwiperItem, Image, Text} from "@tarojs/components";
import {AtProgress} from 'taro-ui'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import TabBar from '../../components/Tabbar'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,partOf} from '../../utils/common'

import './index.less'

import icon_67 from '../../assets/img/icon_67.png'
import icon_68 from '../../assets/img/icon_68.png'
import icon_69 from '../../assets/img/icon_69.png'
import icon_70 from '../../assets/img/icon_70.png'
import icon_71_on from '../../assets/img/icon_71_on.png'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    banners: [],
    publicWelfare:[],
    activity:[],
    allMoney: {}
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'公益' })
    this.getBanners()
    this.getPublicWelfare()
    this.getAllPublicWelfareMoney()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getBanners() {
    let { PublicWelfareStore }  = this.props.stores
    PublicWelfareStore.getBanners({
      callback: banners => {
        let resArr = toJS(banners)
        this.setState({
          banners: resArr.items
        })
      }
    })
  }

  // 公益、活动列表
  getPublicWelfare() {
    let { PublicWelfareStore }  = this.props.stores
    PublicWelfareStore.getPublicWelfare({
      callback: res => {
        let resArr = toJS(res)
        this.setState({
          publicWelfare: resArr.welfare,
          activity: resArr.activities
        })
        getRuntime().setStorage('welfare_activity')
      }
    })
  }

  /**
   * 获取百分比
   * @param x 分子(已募捐金额)
   * @param y 分母(需要募捐总数)
   */
  getPercentage(x: number,y: number = 1) {
    let res:any = (x/y).toFixed(2)
    if(res >= 1) res = 1
    return res*100
  }

  handelRouterNeedLogin(url: string = '/pages/index/index'): void {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    getRuntime().navigateTo(url)
  }

  getAllPublicWelfareMoney() {
    let { PublicWelfareStore } = this.props.stores
    PublicWelfareStore.getAllPublicWelfareMoney({
      callback: res => {
        this.setState({ allMoney: toJS(res) })
      }
    })
  }

  render() {
    let { banners, publicWelfare, activity, allMoney } = this.state
    let accumulatedAmount = allMoney.accumulatedAmount?(allMoney.accumulatedAmount/1000).toFixed(2)+'万': '暂无'
    let surplusAmount = allMoney.surplusAmount?(allMoney.surplusAmount/1000).toFixed(2)+'万': '暂无'
    let usedAmount = allMoney.usedAmount?(allMoney.usedAmount/1000).toFixed(2)+'万': '暂无'
    return (
      <View className='welfare-index'>
        {banners.length>0&&
        <View className='weifare-swiper '>
           <Swiper className='swiper'
                   indicatorColor='#f7cad0'
                   indicatorActiveColor='#fff'
                   indicatorDots
           >
             {
               banners.map(item => {
                 return(
                   <SwiperItem className='swiper-item' onClick={this.handelRouter.bind(this, item.url)}>
                     <Image className='swiper-img' src={item.picture} />
                   </SwiperItem>
                 )
               })
             }
           </Swiper>
        </View>
        }

        <View className='welfare-nav'>
          <View className='item'>
            <Image className='item-icon' src={icon_67} />
            <View className='info'>
              <View className='welfare-title'>累计慈善金额累计慈善金额累计慈善金额累计慈善金额</View>
              <View className='welfare-info'>{accumulatedAmount}</View>
            </View>
          </View>
          <View className='item'>
            <Image className='item-icon' src={icon_68} />
            <View className='info'>
              <View className='welfare-title'>剩余慈善金额</View>
              <View className='welfare-info'>{surplusAmount}</View>
            </View>
          </View>
          <View className='item'>
            <Image className='item-icon' src={icon_69} />
            <View className='info'>
              <View className='welfare-title'>已使用慈善金额</View>
              <View className='welfare-info'>
                {usedAmount}
             {/*   <Text className='welfare-view'>查看详情> </Text>*/}
              </View>
            </View>
          </View>
          <View className='item' onClick={this.handelRouterNeedLogin.bind(this, '/pages/public_welfare/welfare_apply')}>
            <Image className='item-icon' src={icon_70} />
            <View className='info'>
              <View className='welfare-title'>提交慈善申请</View>
              <View className='welfare-info welfare-apply'>申请资助</View>
            </View>
          </View>
        </View>
        <View className='interval' />

        {publicWelfare.length>0&&
        <View className='column-wrap'>
           <View className='column-title content-30'>
             {/* <View className='column-name'>我要投票
                 <Text className='time'>20天20时2分2秒</Text>
                 结束投票
              </View>*/}
              <View className='column-name'>支持他(她)</View>
              <Text className='column-more' onClick={this.handelRouter.bind(this, '/pages/public_welfare/welfare')}>更多 > </Text>
           </View>
        </View>
        }
        {
          publicWelfare.length>0&&
          <View className='list-15 '>
            {
              publicWelfare.map(item => {
                return(
                  <View className='list-15-item' onClick={this.handelRouter.bind(this,'/pages/public_welfare/welfare_detail?id='+item.id)}>
                    <Image className='img' src={item.logoImg} />
                    <View className='info'>
                      <View className='line line1'>
                        <View className='list-title'>{item.name}</View>
                        <View className='progress'>
                          <AtProgress percent={this.getPercentage(item.sumMoney,item.amountOfApplication)} color={'#de5932'} isHidePercent={true}/>
                        </View>
                        <Text className='count'>{item.amountOfApplication}</Text>
                        <Text className='percentage'>{this.getPercentage(item.sumMoney,item.amountOfApplication)}%</Text>
                      </View>
                      <View className='line line2'>
                        <Text className='list-desc'>{partOf(item.introduce,30)}</Text>
                        <Image className='btn-support' src={icon_71_on} />
                      </View>
                    </View>
                  </View>
                )
              })
            }
          </View>
        }
        {
          publicWelfare.length<=0&&<View className='page-none-info'>暂无公益项目信息~</View>
        }

        <View className='interval' />

        {activity.length > 0 &&
        <View className='column-wrap'>
           <View className='column-title content-30 c2' style={{'border-left': '6px solid #feb851'}}>
              <View className='column-name'>慈善活动</View>
              <View className='column-more' onClick={this.handelRouter.bind(this, '/pages/public_welfare/activity')}>更多
                 > </View>
           </View>
        </View>
        }

        {activity.length>0&&
        <View className='list-17'>
          {
            activity.map(item => {
              return(
                <View className='list-17-item' onClick={this.handelRouter.bind(this, '/pages/public_welfare/activity_detail?id='+item.id)}>
                  <Image className='img' src={item.logoImg}/>
                  <View className='info'>
                    <View className='list-title'>{item.title}</View>
                    <View className='list-desc'>{partOf(item.introduce, 45)}</View>
                  </View>
                </View>
              )
            })
          }
        </View>
        }
        <TabBar currentTab='publicWelfare' />
      </View>
    )
  }
}

export default Index
